<template>
  <div class="divBox relative">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form inline size="small" :model="userFrom" ref="userFrom" :label-position="labelPosition"
            label-width="110px">
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                <el-col v-bind="grid">
                  <el-form-item label="姓名搜索：">
                    <el-input v-model="userFrom.keywords" placeholder="请输入人员姓名" clearable class="selWidth" />
                  </el-form-item>
                </el-col>
                <el-col v-bind="grid">
                  <el-form-item label="所属单位：">
                    <el-select v-model="userFrom.departmentId" placeholder="请选择" class="selWidth">
                      <el-option :value="item.id" v-for="(item, index) in departmentData" :key="index"
                        :label="item.name"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col v-bind="grid">
                  <el-form-item label="政治面貌：">
                    <el-select v-model="userFrom.zzmm" placeholder="请选择" class="selWidth">
                      <el-option :value="item.id" v-for="(item, index) in categoryData.zzmmList" :key="index"
                                 :label="item.name"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-col>
              <template v-if="collapse">
                <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                  <el-col v-bind="grid">
                    <el-form-item label="身份证号：">
                      <el-input v-model="userFrom.idcard" placeholder="请输入身份证号" clearable class="selWidth" />
                    </el-form-item>
                  </el-col>
                  <el-col v-bind="grid">
                    <el-form-item label="军官证号：">
                      <el-input v-model="userFrom.sergeantNumber" placeholder="请输入军官证号" clearable class="selWidth" />
                    </el-form-item>
                  </el-col>
                  <el-col v-bind="grid">
                    <el-form-item label="性别：">
                      <el-input v-model="userFrom.gender" placeholder="请输入性别" clearable class="selWidth" />
                    </el-form-item>
                  </el-col>
                  <el-col v-bind="grid">
                    <el-form-item label="部职别：">
                      <el-input v-model="userFrom.positionDesc" placeholder="请输入部职别" clearable class="selWidth" />
                    </el-form-item>
                  </el-col>
                  <el-col v-bind="grid">
                    <el-form-item label="行政职务：">
                      <el-input v-model="userFrom.administrativePosition" placeholder="请输入行政职务" clearable
                        class="selWidth" />
                    </el-form-item>
                  </el-col>
                  <el-col v-bind="grid">
                    <el-form-item label="军衔等级：">
                      <el-input v-model="userFrom.rankTitle" placeholder="请输入军衔等级" clearable class="selWidth" />
                    </el-form-item>
                  </el-col>
                  <el-col v-bind="grid">
                    <el-form-item label="岗位层级：">
                      <el-input v-model="userFrom.positionLevel" placeholder="请输入岗位层级" clearable class="selWidth" />
                    </el-form-item>
                  </el-col>
                  <el-col v-bind="grid">
                    <el-form-item label="待遇级别：">
                      <el-input v-model="userFrom.treatmentLevel" placeholder="请输入待遇级别" clearable class="selWidth" />
                    </el-form-item>
                  </el-col>
                  <el-col v-bind="grid">
                    <el-form-item label="籍贯：">
                      <el-input v-model="userFrom.nativePlace" placeholder="请输入籍贯" clearable class="selWidth" />
                    </el-form-item>
                  </el-col>
                  <el-col v-bind="grid">
                    <el-form-item label="民族：">
                      <el-input v-model="userFrom.nationText" placeholder="请输入民族" clearable class="selWidth" />
                    </el-form-item>
                  </el-col>
                  <el-col v-bind="grid">
                    <el-form-item label="婚姻状况：">
                      <el-input v-model="userFrom.maritalStatusText" placeholder="请输入婚姻状况" clearable class="selWidth" />
                    </el-form-item>
                  </el-col>
                </el-col>
              </template>
              <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="text-right userFrom">
                <el-form-item>
                  <el-button type="primary" icon="ios-search" label="default" class="" size="small"
                    @click="userSearchs">搜索
                  </el-button>
                  <el-button class="ResetSearch mr10" @click="reset('userFrom')" size="small">重置</el-button>
                  <a class="ivu-ml-8" @click="collapse = !collapse">
                    <template v-if="!collapse">
                      条件筛选 <i class="el-icon-arrow-down"></i>
                    </template>
                    <template v-else>
                      条件筛选 <i class="el-icon-arrow-up"></i>
                    </template>
                  </a>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="btn_bt">
          <el-button icon="el-icon-circle-plus" size="mini" type="primary" @click="handlerOpenEdit(0)"
            v-hasPermi="['admin:person:save']">添加人员
          </el-button>
          <el-upload class="upload-demo" style="display:inline-block!important;" action
            accept="application/xls,application/xlsx" :before-upload="onBeforeUpload" :http-request="handleUploadForm3"
            :headers="myHeaders" :show-file-list="false">
            <el-button icon="el-icon-upload2" size="mini" type="primary" v-hasPermi="['admin:person:import']"
              style="margin-left:0;">花名册导入
            </el-button>
          </el-upload>
          <el-button icon="el-icon-download" size="mini" type="primary" @click="handlerOpenExport(1)"
            v-hasPermi="['admin:person:export']" style="margin-left:0;">花名册导出
          </el-button>
          <el-button icon="el-icon-download" size="mini" type="primary" v-hasPermi="['admin:person:import']"
            @click="getMuBan('/花名册模板.xls', '花名册模板')" style="margin-left:0;">花名册模板下载
          </el-button>
          <el-upload class="upload-demo" style="display:inline-block!important;" action
            accept="application/xls,application/xlsx" :before-upload="onBeforeUpload" :http-request="handleUploadForm2"
            :headers="myHeaders" :show-file-list="false">
            <el-button icon="el-icon-upload2" size="mini" type="primary" v-hasPermi="['admin:person:import']"
              style="margin-left:0;">个人信息导入
            </el-button>
          </el-upload>
          <el-button icon="el-icon-download" size="mini" type="primary" v-hasPermi="['admin:person:import']"
            @click="getMuBan('/个人信息导入模板.xls', '个人信息导入模板')" style="margin-left:0;">个人信息模板下载
          </el-button>
          <el-button icon="el-icon-delete" type="danger" size="mini" @click="removeAll()"
                    v-hasPermi="['admin:person:deleteIds']">批量删除</el-button>
        </div>
      </div>
      <el-table ref="multipleTable" v-loading="loading" row-key="getRowKeys" @select="handleCheckBox"
        @select-all="handleSelectAll" :data="listData.list" size="mini" @sort-change="handleSortChange"
          :header-cell-style="{ fontWeight: 'bold', background: '#f8f8f9', color: '#515a6e', height: '30px' }" border>
        <el-table-column type="selection" width="50" />
<!--        <el-table-column align="center" label="ID" prop="id" />-->
        <el-table-column align="center" label="序号" prop="serialNumber" sortable="custom"  />
        <el-table-column align="center" label="姓名" prop="name" min-width="100" />
        <el-table-column align="center" label="部职别" prop="positionDesc" min-width="230" />
        <el-table-column align="center" label="性别" prop="gender" min-width="100" />
        <el-table-column align="center" label="民族" prop="nationText" min-width="100" />
        <el-table-column align="center" label="出生年月日" prop="birthday" min-width="100" />
        <el-table-column align="center" label="出生地" prop="birthPlace" min-width="100" />
        <el-table-column align="center" label="籍贯" prop="nativePlace" min-width="100" />
        <el-table-column align="center" label="学历" prop="educationText" min-width="100" />
        <el-table-column align="center" label="毕业院校" prop="school" min-width="100" />
        <el-table-column align="center" label="所学专业" prop="major" min-width="100" />
        <el-table-column align="center" label="现在学历" prop="firstEducationText" min-width="100" />
        <el-table-column align="center" label="毕业院校及时间" prop="firstSchool" min-width="100" />
        <el-table-column align="center" label="联系电话" prop="phone" min-width="100" />
        <el-table-column align="center" label="详细住址" prop="address" min-width="100" />
        <el-table-column align="center" label="身份证号" prop="idcard" min-width="100" />
        <el-table-column align="center" label="是否特殊人才" prop="isSpecial" min-width="100" />
        <el-table-column align="center" label="实际工作岗位" prop="actualJob" min-width="100" />
        <el-table-column align="center" label="士兵来源" prop="officersSource" min-width="100" />
        <el-table-column align="center" label="备注" prop="remark" min-width="100" />
        <el-table-column align="center" label="军官证号/军士证号" prop="sergeantNumber" min-width="100" />
        <el-table-column align="center" label="驾照" prop="license" min-width="100" />
        <el-table-column align="center" label="军衔等级" prop="rankTitle" min-width="100" />
        <el-table-column align="center" label="军衔等级时间" prop="rankTime" min-width="100" />
        <el-table-column align="center" label="岗位层级" prop="positionLevel" min-width="100" />
        <el-table-column align="center" label="岗位层级时间" prop="positionTime" min-width="100" />
        <el-table-column align="center" label="行政职务" prop="administrativePosition" min-width="100" />
        <el-table-column align="center" label="行政职务时间" prop="administrativeTime" min-width="100" />
        <el-table-column align="center" label="待遇级别" prop="treatmentLevel" min-width="100" />
        <el-table-column align="center" label="待遇级别时间" prop="treatmentTime" min-width="100" />
        <el-table-column align="center" label="部职别" prop="positionDesc" min-width="100" />
        <el-table-column align="center" label="单位名称" prop="departmentText" min-width="100" />
        <el-table-column align="center" label="相当入伍时间" prop="xdrwTime" min-width="100" />
        <el-table-column align="center" label="入伍时间" prop="rwTime" min-width="100" />
        <el-table-column align="center" label="入党时间" prop="rdTime" min-width="100" />
        <el-table-column align="center" label="参加工作时间" prop="joinWorkTime" min-width="100" />
        <el-table-column align="center" label="健康状况" prop="isHealth" min-width="100" />
        <el-table-column align="center" label="婚姻状况" prop="maritalStatusText" min-width="100" />
        <el-table-column align="center" label="操作" min-width="270" fixed="right">
          <template slot-scope="scope">
            <el-button icon="el-icon-edit" type="primary" size="mini" @click="handlerOpenEdit(1, scope.row)"
              v-hasPermi="['admin:person:info']">编辑
            </el-button>
            <el-button icon="el-icon-download" type="success" size="mini" @click="handlerExport(scope.row.id)"
              v-hasPermi="['admin:person:export']">导出
            </el-button>
            <el-button icon="el-icon-delete" type="danger" size="mini" @click="handlerOpenDel(scope.row)"
              v-hasPermi="['admin:person:delete']">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :page-sizes="[15, 30, 45, 60]" :current-page="userFrom.page" :page-size="userFrom.limit"
        :layout="constants.page.layout" :total="listData.count" @size-change="handleSizeChange"
        @current-change="pageChange" />
    </el-card>
    <el-dialog :visible.sync="editDialogConfig.visible" :title="editDialogConfig.isCreate === 0 ? '创建人员' : '编辑人员'"
      destroy-on-close :close-on-click-modal="false" width="1000px" top="8vh">
      <edit v-if="editDialogConfig.visible" :is-create="editDialogConfig.isCreate"
        :edit-data="editDialogConfig.editData" :all-category-data="categoryData" :all-tree-list="treeList"
        @hideEditDialog="hideEditDialog" />
    </el-dialog>

    <!-- 选择导出字段 -->
    <el-dialog :visible.sync="exportDialogConfig.visible" title="选择导出数据" destroy-on-close :close-on-click-modal="false"
      width="700px">
      <exportElc v-if="exportDialogConfig.visible" :operate-type="exportDialogConfig.operateType"
        :edit-data="exportDialogConfig.editData" :all-option-list="optionList"
        :all-multiple-selection="multipleSelection" @hideExportDialog="hideExportDialog" />
    </el-dialog>
  </div>
</template>

<script>
import * as categoryApi from '@/api/categoryApi.js'
import * as personApi from '@/api/person.js'
import * as roleApi from '@/api/role.js'
import edit from './edit'
import exportElc from './exportElc'
import { checkPermi } from '@/utils/permission'
import * as selfUtil from '@/utils/ZBKJIutil'
import { getToken } from '@/utils/auth'
import { getDepartmentList, personExportExcel, personList } from '@/api/person.js'
import { categoryList } from '@/api/categoryApi.js'
import * as api from '@/api/sports'
import { createFile, exportTest } from '@/utils/utils'
import { exportExcelApi } from '@/api/sports'
import { id } from 'html-webpack-plugin/lib/chunksorter' // 权限判断函数
export default {
  // name: "index"
  components: { edit, exportElc },
  data() {
    return {
      departmentData: [],
      constants: this.$constants,
      loading: false,
      listData: { list: [] },
      categoryData: {
        genderList: [],
        licenseList: [],
        healthList: [],
        specialList: [],
        nationList: [],
        educationList: [],
        personTypeList: [],
        positionLevelList: [],
        administrativePositionList: [],
        treatmentLevelList: [],
        positionTecList: [],
        rankTitleList: [],
        zzmmList: [],
        yearCheckList: [],
        familyList: [],//称谓
        scoreList: []//训练评级
      },//配置项
      treeList: [],//单位树
      editDialogConfig: {
        visible: false,
        isCreate: 0, // 0=创建，1=编辑
        editData: {}
      },
      exportDialogConfig: {
        visible: false,
        operateType: 0, // 0=导出单独人员及设备，1=批量导出人员花名册
        editData: {}
      },
      optionList: {},//导出信息下拉项
      multipleSelection: [],//勾选的人员对象ID
      myHeaders: { 'X-Token': getToken() },

      //筛选
      labelPosition: 'right',
      collapse: false,
      userFrom: {
        keywords: '',
        positionDesc: '',
        departmentId: '',
        phone: '',
        nativePlace: '',
        birthPlace: '',
        birthday: '',
        rdTime: '',
        rwTime: '',
        joinWorkTime: '',
        school: '',
        major: '',
        idcard: '',
        zzmm: '',
        nationText: '',
        education: '',
        personType: '',
        positionLevel: '',
        positionTec: '',
        rankTitle: '',
        isSpecial: '',
        gender: '',
        isHealth: '',
        maritalStatusText: '',
        page: 1,
        limit: 15,
        sortType: 2,
      },
      grid: {
        xl: 8,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24
      }
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        const query = route.query
        if (query) {
          this.userFrom.name = query.id
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.handleGetPersonList()
    this.initCategoryData()
    this.handlerGetTreeList()
    this.initPersonOptionData()
    this.getDepartmentList()
  },
  methods: {
    handleSortChange(c) {
      const order = c.order;
      if (order == null || order == 'ascending') {
        this.userFrom.sortType = 2;
      } else {
        this.userFrom.sortType = 1;
      }
      this.handleGetPersonList();
    },
    getDepartmentList() {
      getDepartmentList().then(res => {
        this.departmentData = res
      })
    },
    onBeforeUpload(file) {
      const isEXCEL = file.type === 'application/xls' || 'application/x-xls' || 'application/zip' || 'application/rar'
      const isLt1M = file.size / 1024 / 1024 < 100

      if (!isEXCEL) {
        this.$message.error('上传文件只能是EXCEL格式!')
      }
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 100MB!')
      }
      return isEXCEL && isLt1M
    },
    // 上传
    handleUploadForm2(param) {
      const formData = new FormData()
      formData.append('file', param.file)
      formData.append('type', 2)
      let loading = this.$loading({
        lock: true,
        text: '上传中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      personApi.doImport(formData)
        .then((res) => {

          let msg = ''
          if (res) {
            msg = res
            this.$message.error(msg)
          } else {
            msg = '信息导入成功'
            this.$message.success(msg)
          }
          loading.close()

          this.handleGetPersonList()
        })
        .catch((res) => {
          loading.close()
        })
    },
    handleUploadForm3(param) {
      const formData = new FormData()
      formData.append('file', param.file)
      formData.append('type', 3)
      let loading = this.$loading({
        lock: true,
        text: '上传中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      personApi.doImport(formData)
        .then((res) => {

          let msg = ''
          if (res) {
            msg = res
            this.$message.error(msg)
          } else {
            msg = '信息导入成功'
            this.$message.success(msg)
          }
          loading.close()

          this.handleGetPersonList()
        })
        .catch((res) => {
          loading.close()
        })
    },
    checkPermi,

    onchangeBirthday(e) {
      this.userFrom.birthday = e
    },
    onchangeRdTime(e) {
      this.userFrom.rdTime = e
    },
    onchangeRwTime(e) {
      this.userFrom.rwTime = e
    },
    onchangeJoinWorkTime(e) {
      this.userFrom.joinWorkTime = e
    },
    // 搜索
    userSearchs() {
      this.userFrom.page = 1
      this.handleGetPersonList()
    },
    reset(formName) {
      this.userFrom = {
        keywords: '',
        positionDesc: '',
        departmentId: '',
        phone: '',
        nativePlace: '',
        birthPlace: '',
        birthday: '',
        rdTime: '',
        rwTime: '',
        joinWorkTime: '',
        school: '',
        major: '',
        idcard: '',
        zzmm: '',
        nationText: '',
        education: '',
        personType: '',
        positionLevel: '',
        positionTec: '',
        rankTitle: '',
        isSpecial: '',
        gender: '',
        isHealth: '',
        maritalStatusText: '',

        page: 1,
        limit: 15
      }
      this.handleGetPersonList()
    },

    handleSizeChange(val) {
      this.userFrom.limit = val
      this.handleGetPersonList()
    },
    pageChange(val) {
      this.userFrom.page = val
      this.handleGetPersonList()
    },
    handlerOpenDel(rowData) {
      this.$confirm('确认删除当前数据').then(() => {
        const _pram = { id: rowData.id }
        personApi.personDel(_pram).then(data => {
          this.$message.success('删除数据成功')
          this.handleGetPersonList()
        })
      })
    },
    initCategoryData() {
      this.loading = true

      categoryApi.categoryList().then(data => {
        data.genderList = [{ id: 1, name: '男' }, { id: 2, name: '女' }]
        data.licenseList = [{ id: 1, name: '有' }, { id: 2, name: '无' }]
        data.healthList = [{ id: 1, name: '健康' }, { id: 2, name: '不健康' }]
        data.educationList = [{ id: 1, name: '博士后' }, { id: 2, name: '博士研究生' }, {
          id: 2,
          name: '硕士研究生'
        }, { id: 2, name: '本科' }, { id: 2, name: '专科' }, { id: 2, name: '高中' }, { id: 2, name: '初中' }, {
          id: 2,
          name: '小学'
        }]
        data.nationList = [
          { id: 1, name: '汉族' },
          { id: 2, name: '壮族' },
          { id: 3, name: '满族' },
          { id: 4, name: '回族' },
          { id: 5, name: '苗族' },
          { id: 6, name: '维吾尔族' },
          { id: 7, name: '土家族' },
          { id: 8, name: '彝族' },
          { id: 9, name: '蒙古族' },
          { id: 10, name: '藏族' },
          { id: 11, name: '布依族' },
          { id: 12, name: '侗族' },
          { id: 13, name: '瑶族' },
          { id: 14, name: '朝鲜族' },
          { id: 15, name: '白族' },
          { id: 16, name: '哈尼族' },
          { id: 17, name: '哈萨克族' },
          { id: 18, name: '黎族' },
          { id: 19, name: '傣族' },
          { id: 20, name: '畲族' },
          { id: 21, name: '傈僳族' },
          { id: 22, name: '仡佬族' },
          { id: 23, name: '东乡族' },
          { id: 24, name: '高山族' },
          { id: 25, name: '拉祜族' },
          { id: 26, name: '水族' },
          { id: 27, name: '佤族' },
          { id: 28, name: '纳西族' },
          { id: 29, name: '羌族' },
          { id: 30, name: '土族' },
          { id: 31, name: '仫佬族' },
          { id: 32, name: '锡伯族' },
          { id: 33, name: '柯尔克孜族' },
          { id: 34, name: '达斡尔族' },
          { id: 35, name: '景颇族' },
          { id: 36, name: '毛南族' },
          { id: 37, name: '撒拉族' },
          { id: 38, name: '布朗族' },
          { id: 39, name: '塔吉克族' },
          { id: 40, name: ' 阿昌族' },
          { id: 41, name: '普米族' },
          { id: 42, name: '鄂温克族' },
          { id: 43, name: '怒族' },
          { id: 44, name: '京族' },
          { id: 45, name: '基诺族' },
          { id: 46, name: '德昂族' },
          { id: 47, name: '乌孜别克族' },
          { id: 48, name: '门巴族' },
          { id: 49, name: '鄂伦春族' },
          { id: 50, name: '独龙族' },
          { id: 51, name: '塔塔尔族' },
          { id: 52, name: '赫哲族' },
          { id: 53, name: '珞巴族' }
        ]
        data.specialList = [{ id: 1, name: '是' }, { id: 2, name: '否' }]
        data.maritalStatusList = [{ id: 1, name: '未婚' }, { id: 2, name: '已婚' }, { id: 3, name: '离婚' }, {
          id: 4,
          name: '丧偶'
        }]
        this.categoryData = { ...data }
        this.loading = false
      }
      ).catch(() => {
        this.loading = false
      })
    },
    initPersonOptionData() {
      this.loading = true

      categoryApi.personOption().then(data => {
        this.optionList = data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
    ,
    handlerGetTreeList() {
      const _pram = { name: '' }

      this.loading = true
      categoryApi.treeCategroy(_pram, 3).then(data => {
        this.treeList = this.handleAddArrt(data)
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
    ,
    handleAddArrt(treeData) {
      const _result = selfUtil.addTreeListLabel(treeData)
      return _result
    }
    ,
    handleGetPersonList() {
      personApi.personList(this.userFrom).then(data => {
        this.listData = data
      })
    }
    ,
    handlerOpenEdit(isCreate, editDate) {
      this.editDialogConfig.editData = editDate
      this.editDialogConfig.isCreate = isCreate
      this.editDialogConfig.visible = true
    }
    ,
    hideEditDialog() {
      this.editDialogConfig.visible = false
      this.handleGetPersonList()
    }
    ,
    resetQuery() {
      this.userFrom.name = ''
      this.userFrom.positionDesc = ''
      this.handleGetPersonList()
    }
    ,
    getMuBan(url, fileName) {
      exportTest(url, fileName)
    },
    //导入
    modalPicTap(tit, num, i) {
      this.$modalUpload((img) => {
        if ((tit === '2' || tit === '3') && !num) {
          let errorNum = 0
          img.map((item) => {
            if (item.attType !== 'xlsx' && item.attType !== 'xls') {
              errorNum++
            }
          })
          if (errorNum > 0) {
            return this.$message.warning('导入文件必须都是后缀名为xlsx或xls的EXCEL文件！')
          }
          if (img.length > 10) {
            return this.$message.warning('最多选择10个文件！')
          }
          let fileUrls = []
          img.map((item) => {
            fileUrls.push(item.attDir)
          })
          if (tit == 2) {
            personApi.doImport({ file: fileUrls.join(','), type: tit })
              .then((res) => {

                let msg = ''
                if (res[0]) {
                  msg = res[0]
                  this.$message.error(msg)
                } else {
                  msg = '人员信息导入成功'
                  this.$message.success(msg)
                }
                this.handleGetPersonList()
              })
          } else {
            let form = new FormData()
            form.append('file', fileUrls.join(','))
            personApi.doImport({ file: fileUrls.join(','), type: tit })
              .then((res) => {
                console.log(res[0])
                let msg = ''
                if (res[0]) {
                  msg = res[0]
                  this.$message.info(msg)
                } else {
                  msg = '人员信息导入成功'
                  this.$message.success(msg)
                }
                this.handleGetPersonList()
              })
          }
        }
      }, tit, 'store')
    }
    ,
    //选择导出条件
    handlerOpenExport(operateType, editDate) {
      this.exportDialogConfig.operateType = operateType
      this.exportDialogConfig.editData = editDate
      this.exportDialogConfig.visible = true
    }
    ,
    //导出
    handlerExport(id) {
      let loading = this.$loading({
        lock: true,
        text: '导出中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const _pram = { personId: id }
      api.exportExcelApi(_pram)
        .then((res) => {
          if (!createFile(res, '人员信息')) {
            this.$message.success('未知的文件格式')
          }
          loading.close()
        })
        .catch((res) => {
          loading.close()
        })
    }
    ,
    hideExportDialog() {
      this.exportDialogConfig.visible = false
      //this.handleGetPersonList()
    }
    ,
    //勾选/取消
    handleCheckBox(rows, row) {
      if (this.multipleSelection.find((item) => item == row.id)) {
        //下面这个filter方法就是删除的方法
        this.multipleSelection = this.multipleSelection.filter(
          (item) => item != row.id
        )
      } else {
        this.multipleSelection.push(row.id)
      }
    }
    ,
    //全部勾选/取消
    handleSelectAll(rows) {
      if (rows.length) {
        rows.forEach((row) => {
          if (!this.multipleSelection.find((item) => item == row.id)) {
            this.multipleSelection.push(row.id)
          }
        })
      } else {
        this.listData.list.forEach((row) => {
          this.multipleSelection = this.multipleSelection.filter(
            (item) => item != row.id
          )
        })
      }
    } ,//批量删除
    removeAll() {
      // 将 this.multipleSelection 赋值给变量 selectedIds
      // 弹出确认对话框并发送删除请求
      if(this.multipleSelection.length==0){
        this.$message.warning('请至少选择一条要删除的数据');
        return;
      }
      this.$confirm("确认要删除选中的" + this.multipleSelection.length + "条数据吗?").then(()=>{
        const loading=this.$loading({text:'删除中'});
        personApi.typeDelBatchPerson({ids:this.multipleSelection.join(',')}).then(()=>{
          this.$message.success('删除成功');
          this.userFrom.page=1;
          this.handleGetPersonList();
        }).finally(()=>{
          loading.close();
        })
      })
    }
    ,
    //下面的方法是进行设置行标识key的方法
    getRowKeys(row) {
      return row.id
    }
    ,
    toggleSelection() {
      this.$refs.multipleTable.clearSelection()
    }
  }
}
</script>

<style scoped>
.upload-demo {
  display: inline-block !important;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
  font-size: 12px;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.text-right {
  text-align: right;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 33.33%;
}

.selWidth {
  width: 100% !important;
}

.seachTiele {
  line-height: 30px;
}

.container {
  min-width: 821px;

  ::v-deep.el-form-item {
    width: 100%;
  }

  ::v-deep.el-form-item__content {
    width: 72%;
  }
}

.ivu-ml-8 {
  font-size: 12px;
  color: #1682e6;
}

.btn_bt {
  border-top: 1px dashed #ccc;
  padding-top: 20px;
}

.relative {
  position: relative;
}
</style>
